<template>
	<!-- 班级打卡情况的反馈组件 -->
	<!--  -->
	<view class="card-wrapper" @click="clickCard">
		<u-row>
			<u-col :span="11">
				<view class="my-sub-title">{{ info.name }}</view>
			</u-col>
			<u-col :span="1">
				<u-icon 
					name="arrow-right">
				</u-icon>
			</u-col>
		</u-row>
		
		
		<!-- 具体信息 -->
		<u-row style="margin-top: 20rpx;">
			<u-col :span="4">
				<view class="flex-col" style="color: #39B54A;">
					<view class="numeric">{{ normal }}</view>
					<view class="desc">正常</view>
				</view>
			</u-col>
			
			<u-col :span="4">
				<view class="flex-col" style="color: #ffaa00;">
					<view class="numeric">{{ abnormal }}</view>
					<view class="desc">异常</view>
				</view>
			</u-col>
			
			<u-col :span="4">
				<view class="flex-col" style="color: #d11e21;">
					<view class="numeric">{{ unfinished }}</view>
					<view class="desc">未打卡</view>
				</view>
			</u-col>
		</u-row>
	</view>
</template>

<script>
	export default {
		props: {
			info: Object,
			ft: String
		},
		mounted() {
			// console.log('deptId', this.info.id)
			this.$u.api.getDeptSimpleInfo({
				date: this.ft,
				deptId: this.info.id
			}).then(res => {
				this.simpleInfo = res.data
				
			})
		},
		computed: {
			normal: function () {
				return this.simpleInfo.clockedNumber - this.simpleInfo.exceptionNumber
			},
			abnormal: function() {
				return this.simpleInfo.exceptionNumber
			},
			unfinished: function() {
				return this.simpleInfo.totalNumber - this.simpleInfo.clockedNumber
			}
		},
		watch: {
			// 监听时间的变化 根据新的时间请求新数据
			ft: function(newVal) {
				this.$u.api.getDeptSimpleInfo({
					date: newVal,
					deptId: this.info.id
				}).then(res => {
					this.simpleInfo = res.data
				})
			}
		},
		methods: {
			clickCard:function() {
				this.$emit('clickCard', this.info)
			}
		},
		data() {
			return {
				simpleInfo:{}
			};
		}
	}
</script>

<style scoped>
	.flex-col {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.numeric {
		font-weight: 600;
		font-size: 15px;
	}
	
	.desc {
		font-weight: 700;
		font-size: 11px;
	}
</style>
